<template>
  <div class="big-num">
    <div v-for="x in 7" :class="'box' + (x)">
      <div v-if="num && dic[num].split(',')[x - 1] == 1">
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  num: {
    type: String,
    defalut: ''
  }
})
// console.log(props.num)
const dic = {
  ' ':'',
  '0': '1,1,1,0,1,1,1',
  '1': '0,0,1,0,0,0,1',
  '2': '0,1,1,1,1,1,0',
  '3': '0,1,1,1,0,1,1',
  '4': '1,0,1,1,0,0,1',
  '5': '1,1,0,1,0,1,1',
  '6': '1,1,0,1,1,1,1',
  '7': '0,1,1,0,0,0,1',
  '8': '1,1,1,1,1,1,1',
  '9': '1,1,1,1,0,1,1'
}
</script>
<style scoped lang="scss">
$colo1: #a3fe19;

.big-num {
  width: 160px;
  height: 250px;
  position: relative;

  .box1 {
    width: 40px;
    height: 140px;
    position: absolute;
    top: 40px;
    left: 0px;

    >div {
      width: 40px;
      height: 60px;
      background-color: $colo1;
    }

    >div::after {
      position: absolute;
      content: '';
      width: 0px;
      top: -40px;
      border-width: 0px 40px 40px 0;
      border-style: solid;
      border-color: $colo1 transparent;
    }

    >div::before {
      position: absolute;
      top: 60px;
      content: '';
      border-width: 20px 20px 0 20px;
      border-style: solid;
      border-color: $colo1 transparent;
    }
  }

  .box2 {
    position: absolute;
    left: 10px;
    top: 0px;
    width: 140px;
    height: 40px;

    >div {
      width: 140px;
      border-width: 40px 40px 0;
      border-style: solid;
      border-color: $colo1 transparent;
    }
  }

  .box3 {
    position: absolute;
    width: 40px;
    height: 140px;
    left: 120px;
    top: 40px;

    >div {
      width: 40px;
      height: 60px;
      background-color: $colo1;
    }

    >div::after {
      position: absolute;
      content: '';
      width: 0px;
      top: -40px;
      border-width: 0px 0px 40px 40px;
      border-style: solid;
      border-color: $colo1 transparent;
    }

    >div::before {
      position: absolute;
      content: '';
      border-width: 20px 20px 0 20px;
      border-style: solid;
      border-color: $colo1 transparent;
      top: 60px;
    }
  }

  .box4 {
    position: absolute;
    left: 45px;
    top: 105px;

    >div {
      width: 70px;
      height: 0;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      background-color: $colo1;
    }

    >div::after {
      content: '';
      position: absolute;
      top: 0px;
      right: -20px;
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-left: 20px solid $colo1;
    }

    >div::before {
      content: '';
      position: absolute;
      top: 0px;
      left: -20px;
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-right: 20px solid $colo1;
    }
  }

  .box5 {
    width: 40px;
    height: 140px;
    position: absolute;
    top: 150px;
    left: 0px;

    >div {
      width: 40px;
      height: 60px;
      background-color: $colo1;
    }

    >div::before {
      position: absolute;
      content: '';
      top: 60px;
      width: 0px;
      border-width: 40px 40px 0px 0px;
      border-style: solid;
      border-color: $colo1 transparent;
    }

    >div::after {
      position: absolute;
      top: -20px;
      content: '';
      border-width: 0px 20px 20px 20px;
      border-style: solid;
      border-color: $colo1 transparent;
    }
  }

  .box6 {
    position: absolute;
    left: 10px;
    top: 210px;
    width: 140px;
    height: 40px;

    >div {
      width: 140px;
      border-width: 0 40px 40px;
      border-style: solid;
      border-color: $colo1 transparent;
    }
  }

  .box7 {
    width: 40px;
    height: 140px;
    position: absolute;
    top: 150px;
    left: 120px;

    >div {
      width: 40px;
      height: 60px;
      background-color: $colo1;
    }

    >div::before {
      position: absolute;
      content: '';
      top: 60px;
      width: 0px;
      border-width: 40px 0px 0px 40px;
      border-style: solid;
      border-color: $colo1 transparent;
    }

    >div::after {
      position: absolute;
      top: -20px;
      content: '';
      border-width: 0px 20px 20px 20px;
      border-style: solid;
      border-color: $colo1 transparent;
    }
  }
}
</style>
